<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <el-col>操作</el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 树形组件 -->
        <!-- tree组件默认识别的字段  props 可以自定义更改名称  default-expand-all：控制子节点的展开-->
        <el-tree
          :data="list"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 作用域插槽 data拿到的是每一个子节点的对象 -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%;"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="addDepart(data.id)">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="editDepart(data.id)">编辑部门</el-dropdown-item>
                        <el-dropdown-item @click.native="delDepart(data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>

      </el-card>
    </div>

    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="30%"

      @close="closeDialog"
      @open="openApi"
    >

      <template #default>
        <el-form ref="addfrom" label-width="120px" :model="from" :rules="rules">

          <el-form-item label="部门名称" prop="name">
            <el-input v-model="from.name" style="width:80%" placeholder="1-50个字符" />
          </el-form-item>

          <el-form-item label="部门编码" prop="code">
            <el-input v-model="from.code" style="width:80%" placeholder="1-50个字符" />
          </el-form-item>

          <el-form-item label="部门负责人" prop="manager">
            <el-select v-model="from.manager" style="width:80%" placeholder="请选择">
              <el-option
                v-for="item in mangerList"
                :key="item.id"
                :value="item.username"
                :label="item.username"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="部门介绍" prop="introduce">
            <el-input v-model="from.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" />
          </el-form-item>
        </el-form>
      </template>

      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confim">确 定</el-button>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import { DeldepartAPI, UpdatadepartAPI, getDepartments, getmangerList, getdepartmentAPI, getEditdepartment } from '@/api/department'
import transTree from '@/utils/transTree'
export default {
  data() {
    // code：code码不可以和已经存在的code重复
    // 1.给code添加一个新的规则 自定义校验函数
    // 2.写不可重复的逻辑
    const validCode = (rule, value, callback) => {
      console.log(value)
      // 编辑逻辑 编辑的时候 自己和自己重复了 这时候容许
      // 解决办法：如果在编辑的状态下，需要codeList中把自己去掉filter
      // 如果当前是新增状态 codeList就是所有的 如果当时是编辑状态codeList就是去掉caChacode之后的
      let codeList = []
      if (this.from.id) {
        codeList = this.souserList.map(item => item.code).filter(code => code !== this.caChacode)
      } else {
        codeList = this.souserList.map(item => item.code)
      }

      // console.log(codeList)
      // 新增逻辑
      // 实现步骤：1.获取当前已经存在的code+当前code value 2.判断所谓的重复其实就是判断 输入的code能不能在已经存在的code中找到
      if (codeList.includes(value)) {
        callback(new Error('当前code码重复'))
      } else {
        callback()
      }
    }
    return {
      // 依赖一份树形数据
      list: [],
      defaultProps: {
        label: 'name'
      },
      // 控制弹层的显示与隐藏
      dialogVisible: false,

      from: {
        name: '', //  部门名称
        code: '', //  部门编码
        manager: '', // 部门负责人
        introduce: '', // 部门介绍
        pid: '' // 要给谁添加子部门 代表他的id
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        code: [
          { validator: validCode, trigger: 'blur' },
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      },
      // 下拉菜单列表
      mangerList: [],
      souserList: [],
      caChacode: []
    }
  },
  // 生命周期函数 用于调用获取过来的数据 自动调用
  // created和mounted 的区别: mounted的优势在于dom渲染完毕 echarts图标 百度地图等 服务端mouted不可用 现在使用的都是客户端
  mounted() {
    this.getList()
  },

  // 方法
  methods: {

    // 获取部门列表方法
    async getList() {
      const res = await getDepartments()
      // 目标是把后端返回的数组转换成树形数组
      // 解决问题:1.直接百度方案  2.自己写
      this.list = transTree(res.depts)
      this.souserList = res.depts
    },
    // 新增逻辑
    // 1.点击按钮 弹框打开
    // 2.在弹框中准备几个表单
    // 3.表单校验
    // 4.收集表单数据
    // 5.提示用户 关闭表单 重新拉取列表 重置表单

    // 点击新增部门
    addDepart(id) {
      console.log(id)
      this.from.pid = id
      this.dialogVisible = true
    },

    // 点击弹框的右上的叉号关闭
    closeDialog() {
      this.dialogVisible = false
      this.$refs.addfrom.resetFields()
    },

    // 点击下拉菜单时触发以下方法，发送axios请求
    openApi() {
      this.fetchmangerList()
    },
    // 获取负责人列表
    async fetchmangerList() {
      const res = await getmangerList()
      this.mangerList = res
    },
    // 提交部门
    confim() {
      this.$refs.addfrom.validate(async (valia) => {
        if (valia) {
          // 编辑重点：增加判断新增还是编辑 调用不同的接口
          // 如何知道是否为编辑 this.from是否有id
          if (this.from.id) {
            await UpdatadepartAPI(this.from)
          } else {
            await getdepartmentAPI(this.from)
          }
          this.$message.success(`${this.from.id ? '编辑' : '新增'}部门成功`)
          this.dialogVisible = false
          this.getList()
          this.$refs.addfrom.resetFields()
          this.resetFrom()
        }
      })
    },
    resetFrom() {
      this.from = {
        name: '', //  部门名称
        code: '', //  部门编码
        manager: '', // 部门负责人
        introduce: '', // 部门介绍
        pid: '' // 要给谁添加子部门
      }
    },
    // 编辑逻辑
    // 1.和新增很多逻辑可以通用 弹框+后续的操作
    // 2.回填数据 调用当前点击项的详情接口回填数据
    // 3.用户进行修改
    // 重新调用接口

    // 点击编辑dialog
    async editDepart(id) {
      this.dialogVisible = true
      const res = await getEditdepartment(id)
      this.from = res
      this.caChacode = res.code
    },

    // 点击删除
    // 删除逻辑
    // 1.询问用户
    // 2.以当前用户id作为参数 调用删除接口
    // 3.以getList调用
    delDepart(id) {
      this.$confirm('确定要删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await DeldepartAPI(id)
        this.$message.success('删除成功')
        this.getList()
      }).catch(() => {

      })
    }
  }
}
</script>

<style>

</style>
